Draw it... On your screen... 


Introductory tutorial on code generated graphics by 

Barttomiej Pilarczyk 


Introduction 

You do not have to consider yourself an artist, nor a programmer. If you have an access to the internet, 
know how to type on a keyboard and download files to your hard drive, I will show you how to create a 
basis for one of the pieces from this exhibition. 

Environment 

Go to https://processing.org/download/ and download the latest available release. You can donate and 
support the Processing Foundation. 

Idea 

It cannot be taught how to be an artist. However, you surely have some ideas. Otherwise, steal them (it 
is fine, at least according to Pablo Picasso and David Bowie). Take these ideas, give them a thought, 
explore and develop them. 

In this very example, I would like to show you how to prepare a series of colourful, irregular lines. In the 
future, you will be able to apply this to any given figure. However, for now we will stick to the lines. 

Steps 

1. Start a new file (it is enough to open the Processing, also called P5 for short) 

2. Start typing. Whatever you wish 

3. Last point is not entirely true. Go to the next one. 

4. There are certain rules to programming: a syntax, which a computer code has to follow in order 
to run correctly. However, I promised we would not go into details. 

5. Just as a painter uses a canvas, we will use the computer screen. We can set the size of our canvas 
and make our background black: 

size (1000, 1000); 
background ( 0 ) ; 

6. Save your file: File -> Save 



7. Right now your Processing sketch should look like this: 
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You can run your sketch by pressing the play button: 


and stop by pressing the stop button: 



8. Let us start from the basics. We can draw a white line in the middle of our canvas: 

stroke (255) ; 

line (width/2 , 0, width/2, height); 

9. Since we already know how to draw a line, we can also draw a series of lines across whole canvas. 
Substitute the last line with the following chunk of code: 

for (float x = 0; x < width; x++) { 

line (x, 0, x, height); 

} 

This code will generate a series of vertical lines. 

10. Since the lines are tightly packed, we cannot distinguish them for now. Let's change the code 
slightly: 

for (float x = 0; x < width; x+=10) { 

line (x, 0, x, height); 

} 

11. White lines are not so interesting. Let us add some colours. In the Processing environment, we 
can choose between two color schemes: RGB or hsb. I chose the hsb scheme. Because... it looks 
more interesting. Type this line above the for loop: 

colorMode (HSB, 360, 100, 100); 

12. Whenever you want to change the colour, you should use the function stroke (H, s, B) ,- 
where H, S, B are numbers defining the values of hue, saturation and brightness, respectively. 

13. We need to define the variable to contain the hue value. Type the following below the 
colorMode line: 

color hu = 0; 









14. The hue value will change with every iteration of the loop. This is how the modified for loop 
should look like now: 


for (float x = 0; 

x < width; x+=10) { 

stroke (hu. 

90, 80); 

line (x, 0 , 

x, height) ; 

hu += 5 ; 


} 



15. It has to be noted that while setting the colour mode, we set the hue to range from 0 to 360. The 
loop above may exceed this value of the hu variable. Therefore, whenever the hu becomes 
greater than 360, it should be reset to 0. It is done by slight modification of the code: 

for (float x = 0; x < width; x+=10) { 

stroke (hu, 90, 80); 
line (x, 0, x, height); 

hu += 5 ; 
if (hu > 360) { 


16. What will happen, if we do not want to draw a line all the way from top to the bottom? Let us 
give the lines some offset. Above the for loop define a variable called offset. We will define 
the offset value as a tenth part of the image height: 

float offset = height / 10; 


Now the for loop should look like this: 


for (float x = offset; x < width-offset; x+=10) { 

stroke (hu, 90 , 

80) ; 

line (x, 0 , x, 

hu += 5 ; 

height) ; 

if (hu > 360) 

{ 

hu = 0 ; 


} 


} 



17. What will happen if we added some more offset at the top and bottom? 

for (float x = offset; x < width-offset; x+=10) { 

stroke (hu, 90, 80); 
line (x, offset, x, height-offset); 
hu += 5 ; 
if (hu > 360) { 







18. Maybe we can add some variability to our picture? Some randomness? What if we did not draw 
a line during every iteration? We can achieve that by generating a random number between 
0 and 1, and decide to draw the line only, when this number is greater than 0.4 (or any other 
number of your choice between 0 and 1. 


for 


} 


(float x = offset; x < width-offset; x+=2) 
stroke (hu, 90, 80); 
if (random (0, 1) >0.4) { 

line (x, offset, x, height-offset); 

} 

hu += 5 ; 
if (hu > 360) { 

hu = 0 ; 

} 


{ 


19. We can also make the lines bit thicker, so they will become more distinct. Type this code above 
the for loop: 

strokeWeight (5) ; 

20. Straight lines are nice to look at. However, we can tilt them slightly so they would become askew. 
We can do that by using a noise function implemented in Processing. We can generate numbers 
over which we do not have much control. We will do that in the following steps. 

21. First, let us define variables, which will be responsible for generating the noise values. These 
variables should be defined outside the for loop. These command will generate random numbers 
between -10 and 10 : 

float xlnoiseStart = random(-10, 10); 
float x2noiseStart = random(-10, 10); 

22. Moreover, additional variables should be initiated. Since the noise values are small numbers, we 
should multiply them by a bigger number in order to see the effect. I chose the value of half of 
the offset: 


float xlnoise = offset/2 * noise (xlnoiseStart) ; 
float x2noise = offset/2 * noise (x2noiseStart) ; 

These values will be updated at every iteration of the for loop. 

23. Your final code should look as follows (take a look a the updated for loop statement): 

size (1000, 1000); 
background ( 0 ) ; 

colorMode (HSB, 360, 100, 100); 
color hu = 0; 

float offset = height / 10; 

float xlnoiseStart = random(-10, 10); 
float x2noiseStart = random(-10, 10); 







float xlnoise = noise (xlnoiseStart) ; 
float x2noise = noise (x2noiseStart) ; 

strokeWeight (5) ; 

for (float x = offset - xlnoise; x < width-offset; x+=10) { 

xlnoise = offset/2 * noise (xlnoiseStart) ; 
x2noise = offset/2 * noise (x2noiseStart) ; 

stroke (hu, 90, 80); 
if (random(0, 1) > 0.4) { 

line (x, offset, x, height-offset); 

} 

xlnoiseStart += 2; 
x2noiseStart += 2; 

hu+=5 ; 

if (hu > 360) { 

hu = 0 ; 

} 


24. Explanation. The following 2 lines of code: 

xlnoiseStart += 2; 
x2noiseStart += 2; 

are implemented in order to modify the noise values used for the line locations. 

25. Now, you can save your artwork: 

saveFrame ( "MyFirstCodeGeneratedArtwork . png" ) ; 

26. Send it to your friends, family or post it on social media. Play with it. Have fun! 


Idea 

This is a basic concept of programming some (un)obvious graphics. It is yours to take, use, explore or 
destroy. Maybe instead of lines you would like to use squares, circles or other figures. Maybe just some 
dots. Get rid of some of the lines? Everything is possible. This is up to you. 


Enjoy. 





